<template>
    <div id="warehouseIndex">
        <div class="left">
                <ul>
                    <li class="addBtn"><el-button type="primary" @click="addWarehouse">新增仓库</el-button></li>
                    <li class="whName">仓库名称</li>
                    <li v-for="(item,index) in warehouseList" :key="index" @click="changeItem(index,item)" :class="{active:activeIndex == index}">{{item.wh_name}}</li>
                </ul>
        </div>
        <div class="right">
             <div class="title">
                 <em>{{warehouseDetails.wh_name}}</em>
                 <el-button  type="primary" :disabled="warehouseDetails.wh_is_default == 1" @click="whDel">删除</el-button>
             </div>
             <div class="wh_Name">
                 <div class="nameTitle">仓库名称：</div>
                 <div class="wh_title">
                     <em v-show="!rechristenStaus">{{warehouseDetails.wh_name}}</em>
                     <el-input v-show="rechristenStaus" v-model="updateName" placeholder="请输入内容"></el-input>
                    <el-button type="primary" @click="rechristenFn">{{rechristenStaus?'保存':'重命名'}}</el-button>
                    <el-button v-show="rechristenStaus" @click="rechristenStaus = false">取消</el-button>
                    </div>
             </div>
             <div class="wh_admin">
                 <div class="nameTitle">仓库管理员：</div>
                 <div class="wh_title"><el-button type="primary" @click="clickPersonnel">选择人员</el-button>
                 <el-tag :key="index"  v-for="(item,index) in warehouseDetails.admin"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(item)">
                    {{item.admin_name}}
                 </el-tag>
                 </div>
             </div>
             <div class="hintText">注：每一次操作只能添加一个管理员。</div>
             <div class="departmentMain">
                 <departmentItem v-for="(item,index) in departmentItemList" :key="index" v-bind="item" @del="getWarehouseInfoDetails" @bindDept="getWarehouseInfoDetails"/>
             </div>
             <popUp v-bind="popUpParams" @close="popUpClose" @confirm="popUpConfirm"/>
        </div>
    </div>
</template>

<script>
    import {complexPicker} from "@/libs/utils" /**封装选部门方法 */
    import departmentItem from './departmentItem'
    import { getWarehouse , getWarehouseInfo , bindWarehouse , delWarehouse , insertWarehouse , modifyWarehouse , removeWarehouse } from './api'
    import popUp from '@/components/pop-up'
    export default {
        components:{departmentItem,popUp},
        data(){
            return{
                departmentItemList:[
                   {
                       type:1,
                       tags:[]
                   },
                   {
                       type:2,
                       tags:[]
                   }
                ],
                warehouseList:[],
                activeIndex:0,
                warehouseDetails:{},
                currentAdmin:[],
                rechristenStaus:false,
                updateName:'',
                popUpParams:{
                    tmpType:'',
                    status:false,
                    title:'',
                    hint:''
                }
            }
        },
        created(){
           this.initList()
        },
        methods:{
            // 弹窗确认
            popUpConfirm(type){
                if(type == "success"){
                    this.popUpParams = {
                        tmpType:'',
                        status:false,
                        title:'',
                        hint:''
                    }
                    removeWarehouse({id:this.warehouseDetails.id})
                    .then((res)=>{
                        // 删除成功，(物理删减) 也可接口重置数据
                        this.warehouseList.splice(this.activeIndex,1)
                        this.activeIndex--
                        this.getWarehouseInfoDetails(this.warehouseList[this.activeIndex].id,true)
                        // 接口重置
                        // this.initList()
                        // this.activeIndex--
                    })
                    .catch((res)=>{
                        if(res.code == -1){
                            this.popUpParams = {
                                tmpType:'fail',
                                status:true,
                                title:'无法删除该仓库',
                                hint:'由于仓库里有资产无法删除该设置，请核对后再操作！'
                            }
                        }
                    })
                }

            },
            // 关闭弹窗
            popUpClose(val){
               this.popUpParams.status = val
            },
            // 删除仓库
            whDel(){
                this.popUpParams = {
                    tmpType:'success',
                    status:true,
                    title:'你确定要删除这个仓库吗？',
                    hint:'删除将无法恢复该数据，请谨慎操作！'
                }
            },
            // 重命名
            rechristenFn(){
                // 进行保存操作
                if(this.rechristenStaus){
                    modifyWarehouse({wh_name:this.updateName,id:this.warehouseDetails.id})
                    .then((res)=>{
                        // 静态重置数据，减少请求消耗
                        this.warehouseDetails = {
                            ...this.warehouseDetails,
                            wh_name:this.updateName
                        }
                        this.warehouseList[this.activeIndex].wh_name = this.updateName
                    })
                }else{
                    this.updateName = this.warehouseDetails.wh_name
                }
                this.rechristenStaus = !this.rechristenStaus
            },
            // 新增仓库
            addWarehouse(){
               insertWarehouse()
               .then(res=>{
                    // 使用接口方式
                    // this.initList(res.id)

                    // 使用物理静态方式 (注，重命名时，需要同修改warehouseList静态name，或者重新请求initList列表)
                    this.warehouseList.push({
                        admin:[],
                        id: res.id,
                        wh_is_default: 2,
                        wh_name: "请编辑仓库名称"
                    })
                    this.activeIndex = this.warehouseList.length - 1
                    this.getWarehouseInfoDetails(res.id)
               })
            },
            // 添加管理员
            clickPersonnel(){
                let that = this
                complexPicker(this,{bool:true,disabledUsers:this.currentAdmin},function (res) {
                    bindWarehouse({users:JSON.stringify(res.users),id:that.warehouseDetails.id})
                    .then(res=>{
                        // 使用请求详情的方式(也可直接请求仓库列表方式)
                        that.getWarehouseInfoDetails()
                    })
                })
            },
            // 切换仓库
            changeItem(index,item){
               this.activeIndex = index
               this.getWarehouseInfoDetails(item.id)
            },
            // 删除管理员
            handleClose(item){
                let {admin_userid,wh_id} = item
                delWarehouse({admin_userid,aaid:'4',wh_id})
                .then(res=>{
                    // 使用重新请求列表的方式
                    // this.initList()

                    // 使用请求详情的方式(也可直接请求仓库列表方式)
                    this.getWarehouseInfoDetails()
                })
            },
            // 初始数据
            initList(id){
                getWarehouse()
                .then((res)=>{
                    this.warehouseList = res
                    // 新增仓库后，默认选中新增仓库
                    if(id){
                        this.activeIndex = this.warehouseList.length - 1
                    }
                    // 如果id不为undefined，即为新增仓库，即获取新仓库详情
                    this.getWarehouseInfoDetails(id?id:res[this.activeIndex].id)
                })
            },
            // 获取仓库详情
            getWarehouseInfoDetails(id = this.warehouseDetails.id,isLoad=false){
               //当不需要拦截器的load显示，isLoad传参为true即可
               getWarehouseInfo({id,isLoad})
               .then((res)=>{
                    this.warehouseDetails = res
                    //  获取当前仓库下的管理员
                    let arr = []
                    res.admin.forEach((item,index)=>{
                           arr.push(item.admin_userid)
                    })
                   this.currentAdmin = [...arr]

                   this.departmentItemList.forEach((item,index)=>{
                        item.id = id
                        if(item.type == 1){
                            item.tags = [...res.a_dept]
                        }else if(item.type == 2){
                            item.tags = [...res.c_dept]
                        }
                   })
               })
            }
        }
    }
</script>

<style lang="scss">
#warehouseIndex{
    height: 100%;
    display:flex;
    .el-button:focus{
        background: #007BFE !important;
    }
    // .el-button:hover{
    //     background: #409EFF !important;
    // }
    .left{
        width:170px;
        background:#fff;
        margin-right:10px;
        padding-bottom: 50px;
        ul{
            width:75%;
            overflow:hidden;
            margin:0 auto 0;
            padding-top:30px;
            font-size:14px;
            .active{
                font-weight:600;
                color:#0C8DFE;
            }
            li{
                height:38px;
                line-height:38px;
                color:#5E5E5E;
                cursor:pointer;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .whName{
                color: #ACACAC;
                font-size: 14px;
                cursor:default;
            }
            .addBtn{
                margin-bottom: 15px;
            }
        }
        .el-button--small, .el-button--small.is-round{
            padding:11px 15px 9px !important
        }
    }
    .right{
        // flex:1;
        width: calc(100% - 54px);
        background:#fff;
        padding:30px 27px 50px;
        > .title{
            width:100%;
            height:27px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:0 0 12px 13px;
            border-bottom:1px solid rgba(223, 223, 223, 1);
            margin-bottom: 42px;
            em{
                line-height:27px;
                font-weight:600;
                font-style: normal;
                display: block;
                font-size:18px;
                color:#101010;
            }
            .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
                background-color:rgba(255,255,255,0) !important;
                border-color:rgba(170, 170, 170, 1) !important;
                color:rgba(170, 170, 170, 1) !important;
                font-size: 12px !important;
            }
            .el-button--primary, .el-button--primary{
                background-color:rgba(255,255,255,0) !important;
                border-color:#3196FA !important;
                color:#3196FA !important;
                font-size: 12px !important;
            }
        }
        .wh_Name{
            display: flex;
            margin:3px 0 37px;
            height: 20px;
            align-items: center;
            .nameTitle{
                width: 84px;
                text-align: right;
                line-height: 20px;
                color: #101010;
                font-size: 14px;
            }
            .wh_title{
                flex: 1;
                display: flex;
                align-items: center;
                .el-input{
                    width: 120px !important
                }
                .el-input__inner{
                    padding:0 10px !important
                }
                .el-input--small .el-input__inner {
                    height: 25px !important;
                    line-height: 25px !important;
                }
                .el-button--small, .el-button--small.is-round{
                    padding:8px 8px 4px!important;
                    margin-right: 0 !important;
                    margin-left: 5px !important;
                }
                > em{
                    color: #101010;
                    font-size: 14px;
                    font-style:normal;
                    margin-right:7px;
                }
                .el-tag{
                    font-size: 12px !important;
                    color:#8A8A8A !important;
                    background-color:#F0F2F5 !important;
                    border-color:#F0F2F5 !important;
                    margin-left: 10px !important;
                }
                .el-tag--small{
                    height: 26px !important;
                    line-height: 26px !important;
                    margin-right: 10px !important;
                }
                .el-tag .el-icon-close{
                    color:#fff !important;
                    background-color:#C0C4CC !important;
                    line-height: 17px !important;
                    right: -2px !important;
                }
            }
        }
        > .hintText{
            color: #ccc;
            font-size: 12px;
            margin:0 0 30px 90px;
        }
        .wh_admin{
            display: flex;
            margin:3px 0 15px;
            height: 20px;
            align-items: center;
            .nameTitle{
                width: 84px;
                text-align: right;
                line-height: 20px;
                color: #101010;
                font-size: 14px;
            }
            .wh_title{
                flex: 1;
                display: flex;
                align-items: center;
                .el-input{
                    width: 120px !important
                }
                .el-input__inner{
                    padding:0 10px !important
                }
                .el-input--small .el-input__inner {
                    height: 25px !important;
                    line-height: 25px !important;
                }
                .el-button--small, .el-button--small.is-round{
                    padding:8px 8px 4px!important;
                    margin-right: 0 !important;
                    margin-left: 5px !important;
                }
                > em{
                    color: #101010;
                    font-size: 14px;
                    font-style:normal;
                    margin-right:7px;
                }
                .el-tag{
                    font-size: 12px !important;
                    color:#8A8A8A !important;
                    background-color:#F0F2F5 !important;
                    border-color:#F0F2F5 !important;
                    margin-left: 10px !important;
                }
                .el-tag--small{
                    height: 26px !important;
                    line-height: 26px !important;
                    margin-right: 10px !important;
                }
                .el-tag .el-icon-close{
                    color:#fff !important;
                    background-color:#C0C4CC !important;
                    line-height: 17px !important;
                    right: -2px !important;
                }
            }
        }
        .departmentMain{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            overflow: hidden;
            justify-content: space-between;
            &::after{
                content:'';
                width: calc(49.2% - 64px);
            }
        }
    }
}
</style>